<!-- 用户管理 -->
<template>
    <div class="users" v-loading="loading">
        <dy-table :elTable_Options="elTable_Options" @handleClick="handleClick" @bottonHandle="bottonHandle" ref="table" />
        <SetPwd ref="pwdLog" v-if="modalStatus === '修改密码'" />
        <SetUserInfo ref="infoLog" v-if="modalStatus === '修改用户信息'" @getTable="getTable" />
        <choose-role ref="mychooserole" v-if="modalStatus === '切换角色'" @submitHandle="submitHandle" />
    </div>
</template>

<script setup>
import { ref, shallowRef, onMounted, nextTick, reactive, computed, toRefs  } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Upload, Plus } from '@element-plus/icons-vue'
import { useCach } from '@/store/cach'
import commonV from '@/common'

// 组件
import SetPwd from './userManagement/set_pwd.vue'
import SetUserInfo from './userManagement/set_userInfo.vue'

const router = useRouter()

//所有展示的数据
let allConfigList = [{
    label: "用户名",
    prop: "username",
    columType: 'linkTo',
    width: 130,
    index: 4,
}, {
    label: "真实姓名",
    prop: "real_name",
    width: 110,
    columType: 'text'
}, {
    label: "工号",
    prop: "user_id",
    width: 120,
    columType: 'linkTo',
}, {
    label: "科室-角色",
    width: 140,
    prop: "departmentRoles",
    columType: 'departmentRoles'
}, {
    label: "手机号",
    prop: "mobile",
    width: 110,
    columType: 'text'
}, {
    label: "是否冻结",
    prop: "is_active",
    width: 120,
    columType: 'select',
    commonVarrName: 'active_status'
}, {
    label: "邮箱",
    prop: "email",
    columType: 'text'
}, {
    label: "操作",
    prop: "",
    fixed: "right",
    width: 200,
    columType: 'opreatebar',
    operation: [{
        op_name: "角色",
        op_index: "1",
        color: "#20A0FF"
    }, {
        op_name: "密码",
        op_index: "2",
        color: "#F7BA2A"
    },
    {
        op_name: "修改",
        op_index: "4",
        color: "#13CE66"
    },
    {
        op_name: "冻结",
        op_index: "5",
        color: "#99A9BF"
    }]
}]

//配置项
let elTable_Options = ref({
    pagename: '用户管理',
    selection: false,
    allConfigList: allConfigList,
    eltableArr: allConfigList,
    table_type: "user_page",
    getwayname: 'users',
    opbutton: [{
        label: '新增用户',
        dealway: 'createUser',
        icon: shallowRef(Plus),
        type: "primary",
        keyV: "add",
        disabled: false
    }, {
        label: "批量导出",
        dealway: "exportData",
        icon: shallowRef(Upload),
        type: "",
        keyV: "import",
        disabled: false
    }],
    //查询栏
    searchList: [{
        label: "用户名，真实姓名，手机号",
        key: "search",
        searchtype: 'input',
        width: 220
    }, {
        label: "真实姓名",
        key: "real_name",
        searchtype: 'input'
    }, {
        label: "工号",
        key: "user_id",
        searchtype: 'input'
    }, {
        label: "角色",
        key: "role_ids",
        searchtype: 'select',
        selfoption: true,
        width: 300,
        options: [],
        filterable: true, //可搜索
        props: {
            value: "id",
            label: "all_role_name"
        }
    }, {
        label: "是否冻结",
        key: "is_active",
        searchtype: 'select',
        options: commonV.statusOption.active_status
    }],
    importexport: {
        export_filename: '用户信息列表.xls',
        export_api: 'exportUser'
    }
})

let table = ref(null)

let pwdLog = ref(null)
let infoLog = ref(null)
let mychooserole = ref(null)
let pageConfig = useCach()

//激活文本
let modalStatus = computed(() => pageConfig.modalStatus)

onMounted(() => {
    getTable()
})

let state = reactive({
    loading: false,
    currentRow: null
})

let { loading } = toRefs(state)

//获取table数据
let getTable = () => {
    nextTick(() => {
        table.value.getTableData()
    })
}

//点击事件
let handleClick = (row, index) => {
    state.currentRow = JSON.parse(JSON.stringify(row))
    if (index == 1) {
        //角色
        pageConfig.changeShowModal(true)
        pageConfig.changeModalStatus('切换角色')
        nextTick(() => {
            mychooserole.value.openFunction(row)
        })
    } else if (index == 2) {
        //密码
        pageConfig.changeShowModal(true)
        pageConfig.changeModalStatus('修改密码')
        nextTick(() => {
            pwdLog.value.openFunction({
                title: `用户 ${row.username} 修改密码`,
                userId: row.id
            })
        })
    } else if (index == 4) {
        //修改
        pageConfig.changeShowModal(true)
        pageConfig.changeModalStatus('修改用户信息')
        nextTick(() => {
            infoLog.value.openFunction({
                title: `修改用户 ${row.username} 的信息`,
                userInfo: row
            })
        })
    } else if (index == 5) {
        //冻结
        ElMessageBox.confirm(
            '是否切换该用户激活状态',
            '提示',
            {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }
        ).then(async () => {
            state.loading = true
            let res = await api.changeaxiosdata('users', 'patch', { is_active: !row.is_active, id: row.id })
            if (res) {
                getTable()
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                })
            }
            state.loading = false
        }).catch(() => { })
    }
}

//选择角色回调
let submitHandle = async (title, list) => {
    const params = new FormData()
    params.append("id", state.currentRow?.id)
    params.append("role_ids", commonV.idtoarrry(list))
    for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (typeof element.department != "undefined") {
            if (typeof element.department.id != "undefined") {
                list[index].department_id = element.department.id
            } else {
                list[index].department_id = element.department
            }
        }
    }
    params.append("department_ids", commonV.idtoarrry(list, 'department_id'))
    state.loading = true
    let res = await commonV.methods.postaxiosdata(elTable_Options.value.getwayname, 'patch', params)
    if (res) {
        ElMessage({
            message: '操作成功!',
            type: 'success'
        })
        getTable()
    }
    state.loading = false
}

//点击按钮事件
let bottonHandle = (v) => {
    if (v === 'createUser') {
        router.push({
            path: '/systemManage/userManagement/create'
        })
    }
}

</script>

<style scope lang="scss"></style>